<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./bootstrap-3.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="./jquery-3.6.0.js"></script>
    <script src="./bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
    <p>标签式的内容导航</p>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">IOS</a></li>
        <li><a href="#">VB</a></li>
        <li><a href="#">JAVA</a></li>
        <li><a href="#">PHP</a></li>
    </ul>
    <p>胶囊式的内容导航</p>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">IOS</a></li>
        <li><a href="#">VB</a></li>
        <li><a href="#">JAVA</a></li>
        <li><a href="#">PHP</a></li>
    </ul>
    <p>面包屑的内容导航</p>
    <ul class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">IOS</a></li>
        <li><a href="#">VB</a></li>
        <li><a href="#">JAVA</a></li>
        <li class="active"><a href="#">PHP</a></li>
    </ul>
    <hr>
    <p>分页导航</p>
    <ul class="pagination">
        <li class="active"><a href="#">&laquo;</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
    <p>翻页导航</p>
    <ul class="pager">
        <li><a href="#">上一页</a></li>
        <li><a href="#">下一页</a></li>
    </ul>
</body>
</html>